<template>
    <div class="CateThreeView">
        <p class="all">全部分类</p>
        <ul>
            <div class="CateThreeViewItem" v-for="item in setCateList" :key="item.id">
                <img :src="item.picture" alt="">
                <p>{{ item.name }}</p>
            </div>
        </ul>

    </div>
</template>


<script>
export default {
    data() {
        return {
            list: [],
            rid: null
        }
    },
    methods: {

    },
    computed: {
        setCateList() {
            let a = this.$store.state.list.find(item => {
                return item.id == this.rid
            })
            return a && a.children
        }
    },
    mounted() {
       this.rid = this.$route.query.id
    },
    watch:{
        $route:{
            handler(val){
                this.rid=val.query.id
            }
        }
    }
}
</script>


<style lang="scss">
@import '@/assets/css/variables.scss';

.CateThreeView {
    width: 100%;

    .all {
        width: 100%;
        height: 100px;
        line-height: 100px;
        text-align: center;
        font-size: 28px;
        color: gray;
    }

    ul {
        width: 100%;
        height: 160px;
        display: flex;

        .CateThreeViewItem {
            width: 168px;
            height: 160px;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                width: 100px;
                height: 100px;
            }

            p {
                width: 100%;
                flex: 1;
                text-align: center;
                line-height: 60px;
            }
        }

        .CateThreeViewItem:hover {
            color: $xtxColor ;
        }
    }

}
</style>